<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue入门案例</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        用户名: {{username}} <br>
        <input type="text" v-model='username'/>
        <input type="button" value="点我+1">

        <h3>插值表达式</h3>
        <br/>变量:  {{username}}   
        <br/>数字:  {{365}} 
        <br/>算术运算 365/5:  {{365/5 }} 
        <br/>比较运算:  {{ 10>3 }} 
        <br/>三元表达式:  {{10>3?"大于":"小于"}} 
        <br/>字符串拼接:  {{'您好: '+ username }} 
        <br/>字符串拼接:  {{'您好: '.concat(username) }} 
        <br/>字符串处理:  {{username.split('').reverse().join('') }} 

        <h3>指令-内容输出指令</h3>
        用户名: <div v-text="word"></div>
        用户名: <div v-html="word"></div>

        <h3>指令-条件渲染指令</h3>
        <div v-if="res">真</div>
        <div v-else="res">假</div>
        <div v-show="!res">真?假</div>

        <h3>指令-列表渲染</h3>
        <div>
            <ul>
                <li v-for="(name,i) in names" v-bind:key="i">
                    {{i}} : {{name}} 
                </li>
            </ul>
        </div>
        <div>
            <ul>
                <li v-for="(stu) in student">
                    
                    <dl>
                        <dt> {{stu.name}}</dt>
                        <dd v-for="(hobby) in stu.hobbys">
                            {{hobby}}
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <script>
        new Vue({
            el:"#app"
            ,data:{
                username:"张三"
                ,word:"<span style='color:red'>周杰</span>"
                ,res:false
                ,names:['张三','李四','王五']
                ,student:[
                    {"name":"张三","hobbys":['看书','打球']}
                    ,{"name":"lisi","hobbys":['看小说','打羽毛球']}
                ]
            }
        });

    </script>
</body>
</html>